@charset "utf-8";
/* CSS Document */

/* 						I M P O R T A N T E 					*/

/* NO CAMBIAR TAMAÑO DE LETRAS 									*/
/* NI COLORES DE LOS TEXTOS QUE NO SEAN LOS DESTACADOS 			*/
/* ESOS QUEDAN EN LOS COLORES NEGRO Y GRIS */

/* DEL LOGO DEL CLIENTE IDENTIFICAR */
/* Color principal, y un color secundario */

/* LISTA DE CLASES CSS QUE SE PUEDEN MODIFICAR PARA PERSONALIZAR LA PLANTILLA */


/* De acá se cambia el header con el logo del cliente, logo bancomer o lo que sea */
/* MUY IMPORTANTE que quede bien prolijo y gráficamente agradable */
/* Recordar que siempre es de 990px de ancho, lo que puede cambiar es el alto */
/* Acá hay que trabajar con algún programa como photoshop o similar y armar un JPG de 990xlo que sea */
/* y armar la cabecera manejando el logo del cliente, ojo a los tamaños, que no quede muy alto el header */
/* Si se cambia el alto de la imagen, cambiar la propiedad height por la corresponda */
#imagen-cliente {
	width: 990px;
	height: 82px;
	margin-top:0px;
	margin-bottom:0px;
	background-image: url(header.jpg);
	background-repeat:no-repeat;
}



/* Se puede ocultar el reloj que aparece arriba a la derecha, para ello descomentar la propiedad visibility */
#liveclock{
	color: #8F8E8E;
	float:right;
	font-size:0.8em;
	margin-right:0;
	padding-top: 5px;
  /*visibility:hidden;*/
}



/* CAMBIA COLOR DEL TEXTO CON EL NOMBRE DEL CLIENTE, EJEMPLO "AVIS México" EN LA PLANTILLA MODELO */
/* Cambiar por el color principal del cliente */
#account-legalname{
	font-size: 1.5em;
	float:left;
	color: #000000;
	font-weight:bold;
}


/* Cambiar por el color principal del cliente. Muestra el importe o los importes en la parte */
/* de DATOS PRINCIPALES PORTAL DE PAGOS */
.dato-importe {
	font-size: 1.5em;
	color: #2fbdc7;
}


/* Cambiar por el color principal del cliente. Muestra datos del cliente en color destacado */
.texto-pago-leyenda-destacado {
	color: #2fbdc7;
	text-align: left;
	font-size:1em;
}

/* Cambiar por el color principal del cliente. Muestra datos del cliente en color destacado en la pantalla de resumen TDX */
.texto-resumen-tdx-destacado {
	color: #2fbdc7;
	text-align: left;
	font-size:1em;
	font-size:1.3em;
}



/* Color de fondo de la tabla de datos principal, la que dice DATOS PRINCIPALES PORTAL DE PAGOS */
/* Ahora es gris claro, se puede sacar la propiedad o colocar de color blanco #FFFFFF */
.new-fondo-tabla-principal {
	background: #FFFFFF;
}


/* Color de fondo del contenedor de leyenda de nivel 1, el que dice DATOS PRINCIPALES PORTAL DE PAGOS */
/* Por default es gris oscuro. Sería óptimo colocar el color principal del cliente, sino queda bien, se puede dejar en gris oscuto */

#contenedor-leyendas {
	background-color: #4b5e74;
	padding: 15px;
	text-align:center;
	-webkit-border-top-left-radius:7px;
	-moz-border-radius-topleft:7px;
	border-top-left-radius:7px;
	-webkit-border-top-right-radius:7px;
	-moz-border-radius-topright:7px;
	border-top-right-radius:7px;
	-webkit-border-bottom-right-radius:7px;
	-moz-border-radius-bottomright:7px;
	border-bottom-right-radius:7px;
	-webkit-border-bottom-left-radius:7px;
	-moz-border-radius-bottomleft:7px;
	border-bottom-left-radius:7px;
}



/* Color de fondo del contenedor de leyenda de nivel 2, el que dice por ejemplo SELECCIONE POR FAVOR UN MEDIO DE PAGO */
/* Por default es gris clarito. Sería óptimo colocar el color secundario del cliente, sino queda bien, se puede dejar en gris clarito */

#contenedor-leyendas-nivel2 {
	background-color: #cccccc;
	padding: 8px;
	text-align:center;
	-webkit-border-top-left-radius:7px;
	-moz-border-radius-topleft:7px;
	border-top-left-radius:7px;
	-webkit-border-top-right-radius:7px;
	-moz-border-radius-topright:7px;
	border-top-right-radius:7px;
	-webkit-border-bottom-right-radius:7px;
	-moz-border-radius-bottomright:7px;
	border-bottom-right-radius:7px;
	-webkit-border-bottom-left-radius:7px;
	-moz-border-radius-bottomleft:7px;
	border-bottom-left-radius:7px;
}




/* BOTONES: hay que modificar el color principal del botón  */

.boton {
	background-color:#2fbdc7; /* este color */
	-webkit-border-top-left-radius:5px;
	-moz-border-radius-topleft:5px;
	border-top-left-radius:5px;
	-webkit-border-top-right-radius:5px;
	-moz-border-radius-topright:5px;
	border-top-right-radius:5px;
	-webkit-border-bottom-right-radius:5px;
	-moz-border-radius-bottomright:5px;
	border-bottom-right-radius:5px;
	-webkit-border-bottom-left-radius:5px;
	-moz-border-radius-bottomleft:5px;
	border-bottom-left-radius:5px;
	text-indent:0;
	border:1px solid; 
	display:inline-block;
	color:#ffffff;
	font-family:Arial;
	font-size:14px;
	font-weight:bold;
	font-style:normal;
	height:30px;
	line-height:30px;
	width:187px;
	text-decoration:none;
	text-align:center;
}
/* Para el fondo del botón cuando el usuario está sobre el botón hay que tomar el color de fondo del botón x default y hacerlo un poco más oscuro */
/* Si se tienen dudas sobre qué color elegir para el hover, colocar gris oscuro #444444 */
.boton:hover {
	background-color:#515151;
}




/* De acá se puede OCULTAR el footer, descomentando la propiedad visibility */
#new-footer-adquira{
	overflow: hidden;
	width: 100%;
	margin: auto;
	padding-top: 0px;
	padding-bottom: 0px;
	visibility:visible;
}


/* Si se deja el footer y es necesario cambiar la imagen, se cambia el JPG de acá y las propiedades width y height */
/* Tratar de armar una imagen de 990px x lo que corresponda, siempre tratando que no sea muy alta */
#logo-footer{
	width: 990px;
	height: 141px;
	margin:auto;
	background-image: url(footer.jpg);
}